<script type="js" setup>
import {computed, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {getCodeAPI, userLoginAPI, userRegisterAPI} from "../../apis/user.js";
import {setJwt} from "../../utils/localStorage.js";

const Router = useRouter()

//登录/注册信息
const userInfo = reactive({
  email: "",
  password: "",
  code: ""
})

// 表示登录还是注册状态
const isLogin = ref(true)

// 切换登录注册状态
const toggleStatus = () => {
  isLogin.value = !isLogin.value
}

// 忘记密码
const forgetPassword = () => {
  message.info('怎么什么都能忘记？怎么不忘记吃饭呢？');
};

// 点击登录或者注册按钮
const handleLoginOrRegister = () => {
  if (isLogin.value) {
    login()
  } else {
    register()
  }
}

// 登录功能
const login = () => {
  userLoginAPI(userInfo).then((res) => {
    console.log("用户登录", res)
    if (res.code === '0000') {
      message.success(res.info)
      setJwt(res.data)
      Router.push('/')
    } else {
      message.error(res.info)
    }
  })
}

// 按钮显示的文字
const getCodeBtnText = ref('获取验证码')

// 获取验证码
const getCode = () => {

  getCodeAPI({email: userInfo.email}).then((res) => {
    console.log("获取验证码", res)
    if (res.code === '0000') {
      message.success(res.info)
      let count = 60
    const timer =  setInterval(() => {
        getCodeBtnText.value = count--
        if (getCodeBtnText.value === 0) {
          getCodeBtnText.value = '获取验证码'
          clearInterval(timer)
        }
      }, 1000)

    } else {
      message.error(res.info)
    }
  })
}

// 注册
const register = () => {
  userRegisterAPI(userInfo).then((res) => {
    console.log("用户注册", res)
    if (res.code === '0000') {
      message.success(res.info)
      Router.push('/')
    } else {
      message.error(res.info)
    }
  })
}

// 是否能获取验证码
const canGetCode = computed(() => {
  return userInfo.email.length > 6 && getCodeBtnText.value === '获取验证码';
})


</script>


<template>

  <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
      <div class="flex items-center gap-2.5 flex-row justify-center h-24">
        <img class="h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
             alt="家强商城"/>
        <h2 class="text-5xl font-bold text-blue-600 m-0">家强商城</h2>
      </div>
      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
        {{ isLogin ? '登录您的账户' : '注册' }}</h2>
    </div>

    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
      <div class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium leading-6 text-gray-900">邮箱</label>
          <div class="mt-2">
            <input v-model="userInfo.email" id="username" autocomplete="true" required=true
                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
          </div>
        </div>

        <div v-show="!isLogin">
          <label for="code" class="block text-sm font-medium leading-6 text-gray-900">验证码</label>
          <div class="mt-2 flex items-center justify-center gap-2">
            <input v-model="userInfo.code" id="username" autocomplete="true" required=true
                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
            <a-button @click="getCode" type="primary" :disabled="!canGetCode">{{ getCodeBtnText }}</a-button>
          </div>

        </div>

        <div>
          <div class="flex items-center justify-between">
            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">密码</label>
            <div class="text-sm" v-show="isLogin">
              <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500"
                 @click="forgetPassword">忘记密码?</a>
            </div>
          </div>
          <div class="mt-2">
            <input v-model="userInfo.password" id="password" name="password" type="password"
                   autocomplete="current-password" required="true"
                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
          </div>
        </div>

        <div>
          <button
              @click="handleLoginOrRegister"
              class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            {{ isLogin ? '登录' : '注册' }}
          </button>
        </div>
      </div>

      <p class="mt-10 text-center text-sm text-gray-500">
        {{ isLogin ? '还不是会员？' : '已是会员？' }}
        {{ ' ' }}
        <a href="#" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
           @click="toggleStatus">{{ isLogin ? '这里可以免费注册' : '点击登录' }}</a>
      </p>
    </div>
  </div>
</template>
